{% extends 'base.html' %}
{% block css %}
<style>
  html, body{
    background-color: #ffffff;
  }
  #buy-div {
    width: 1260px;
    margin: 0 auto;
  }
  #buy-div > p:first-child{
    font-size: 32px;
    color: #6b6b6b;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  #buy-course-info, .pay-div{
    font-size: 24px;
    color: #333333;
    border: 1px solid #eeeeee;
    padding: 15px 25px;
    border-radius: 5px;
  }
  #buy-course-info .course-info-value {
    margin-top: 30px;
    height: 121px;
    text-align: center;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .course-name{
    margin-left: 30px;
  }
  .qrcode{
    text-align: center;
    margin: 20px 0;
  }
  .pay-div{
    margin-top: 10px;
    color: #6b6b6b;
  }
  #pay-done{
    text-align: center;
    margin-bottom: 20px;
    display: none;
  }
</style>
{% endblock css %}

{% block content %}
{% load divide %}
<div id="buy-div">
  <p>结算中心</p>
  <div id=buy-course-info class="flex-row-around align-items-start">
    <div>
      <div class="course-info-title"> 商品名称 </div>
      <div class="course-info-value">
        <div>
          <img src="{{course.avatar_url}}" width="183" height="121" />
          <span class="course-name title24">{{name}}</span>
        </div>
      </div>
    </div>
    <div>
      <div class="course-info-title">单价</div>
      <div class="course-info-value">￥{{price|divide:100}}</div>
    </div>
    <div>
      <div class="course-info-title">数量</div>
      <div class="course-info-value">1</div>
    </div>
    <div>
      <div class="course-info-title">小计 {{product_id}}</div>
      <div class="course-info-value">￥{{price|divide:100}}</div>
    </div>
  </div>
  <div class='sep-line'></div>
  <div class="flex-column-start pay-div">
    <div>请使用微信扫码完成支付</div>
    {% if error %}
      <div class="error_msg">{{error}}</div>
    {% else %}
    <div class="qrcode">
      <input type="hidden" id="order_no" value="{{order_no}}" />
      <input type="hidden" id="jump_url" value="" />
      {% load qr_code %}
      {% qr_from_text raw.code_url size="20" %}
    </div>
    {% endif %}
    <div id="pay-done">
      <img src="/static/study/images/wechat.png" width="50" />
      <span id='pay-done-text'>支付完成，3秒后跳转</span>
    </div>
    <div>本商品为虚拟内容服务，购买后不支持退换、转让，请斟酌确认。</div>
  </div>
</div>

{% endblock content %}
{% block script %}
{% load static %}
<script src="{% static 'js/tools.js' %}" type="text/javascript"></script>
<script>
  var interval = setInterval(get_order_state, 1000)
  var order_no = window.document.getElementById('order_no').value
  var payDone = window.document.getElementById('pay-done')
  var payDoneText = window.document.getElementById('pay-done-text')
  var jump_sec = 3
  function count_jump() {
    jump_sec--;
    if (jump_sec <= 0) {
      // 根据订单类型跳转
      location.href = document.getElementById('jump_url').value 
      return;
    }
    payDoneText.innerText = '支付完成，' + jump_sec + '秒后跳转'  
    setTimeout(count_jump, 1000)
  }
  function get_order_state () {
    _post("{% url 'study:payQuery' %}", {
      'order_no': order_no
    }, function(res){
      if (res.data.status == 1) {
        // 支付完成
        payDone.style.display = 'block'
        document.getElementById('jump_url').value = res.data.jump_url
        clearInterval(interval)
        setTimeout(count_jump, 1000)
      }else if(res.data.status == -1) {
        clearInterval(interval)
        payDone.innerHTML = '<div class="error_msg">支付失败</div>' 
      }
    }, function(err){
        clearInterval(interval)
    })
  }
  

</script>
{% endblock %}